<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后台系统设计交互规范</title>
    <link rel="stylesheet" href="./stylesheets/bootstrap.css">
    <script src="javascripts/jquery-1.11.0.min.js"></script>
    <script src="javascripts/filter.js"></script>
    <script src="javascripts/bootstrap.min.js"></script>
    <script src="javascripts/bootstrap/tooltip.js"></script>
    <script src="javascripts/art-template.js"></script>

    <style>
        body {
            background-color: #ecf1f5;
        }.max{max-width: 100px;}
    </style>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="page-header">
            <h1>后台系统设计交互规范</h1>
        </div>
        <div class="">
            <h4><b>文字和标题</b></h4>
            <h5 class="text-gray"><b>（整个后台系统字体：微软雅黑）</b></h5>

            <h1>一级标题</h1>

            <h2>二级标题</h2>

            <h3>三级标题</h3>
            <h4>四级标题
                <small>*常用标题</small>
            </h4>
            <h6>六级标题</h6>
            <span><small>提示文字 - 12px - #999999</small></span>
            <br/>
            <code><span><</span>span> <span><</span>small>提示文字<span><</span>/small<span>><</span>/span></code>

            <p>
                <small class="text-danger">警示提示文字 - 12px - #dd4b39</small>
            </p>
            <code> <span><</span>span class="text-danger">警示提示文字 <span><</span>/span></code>

            <p><a href="#">链接</a></p>
            <hr/>
            <h4><b>常用颜色</b></h4>

            <p>支持 <code>.bg-color</code> 以及 <code>.text-color</code></p>

            <div class="colorBlock bg-darkBlue">darkBlue</div>
            <div class="colorBlock bg-primary">primary</div>
            <div class="colorBlock bg-greyPurple">greyPurple</div>
            <div class="colorBlock bg-pinkRed">pinkRed</div>
            <div class="colorBlock bg-darkGray">darkGray</div>
            <div class="colorBlock bg-lightGrey">lightGrey</div>
            <div class="colorBlock bg-darkCyan">darkCyan</div>
            <hr/>
            <h4><b>按钮样式</b></h4>

            <button class="btn btn-default">default</button>
            <button class="btn btn-primary">primary</button>
            <button class="btn btn-greyPurple">greyPurple</button>
            <button class="btn btn-pinkRed">pinkRed</button>
            <button class="btn btn-link">btn-link</button>
            <br/>

            <div class="p20"></div>
            <button class="btn btn-success">success</button>
            <button class="btn btn-info">info</button>
            <button class="btn btn-warning">warning</button>
            <button class="btn btn-danger">danger</button>
            <br/>

            <div class="p20"></div>
            <button class="btn btn-default btn-xs">btn-xs</button>
            <button class="btn btn-default btn-sm">btn-sm</button>
            <button class="btn btn-default btn-lg">btn-lg</button>

            <div class="p20"></div>
            <button class="btn btn-default btn-block">btn-block</button>

            <br/>
            <h4>按钮组</h4>

            <div class="btn-group" role="group" aria-label="...">
                <button type="button" class="btn btn-default">1</button>
                <button type="button" class="btn btn-default">2</button>

                <div class="btn-group" role="group">
                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"
                            aria-haspopup="true" aria-expanded="false">
                        Dropdown
                        <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu">
                        <li><a href="#">Dropdown link</a></li>
                        <li><a href="#">Dropdown link</a></li>
                    </ul>
                </div>
            </div>

            <hr/>
            <h4><b>标签样式</b></h4>

            <div class="tag tag-lightGrey">tag-lightGrey</div>
            <div class="tag tag-primary">tag-primary</div>

            <hr/>

            <h4><b>气泡样式</b></h4>

            <div class="tag tag-lightGrey">tag-lightGrey <span class="badge">11</span></div>
            <div class="tag tag-primary">tag-primary <span class="badge">111</span></div>
            <div class="p20"></div>
            <br/>
            <button class="btn btn-primary">btn-primary <span class="badge">1</span></button>
            <button class="btn btn-link">btn-link <span class="badge">1</span></button>
            <button class="btn btn-link">btn-link <span class="badge">1</span></button>
            <button class="btn btn-link">btn-link <span class="badge">1</span></button>
            <br/>

            <div class="p20"></div>
            <span class="badge bg-darkBlue">darkBlue</span>
            <span class="badge bg-primary">primary</span>
            <span class="badge bg-greyPurple">greyPurple</span>
            <span class="badge bg-pinkRed">pinkRed</span>
            <span class="badge bg-darkGray">darkGray</span>
            <span class="badge bg-lightGrey">lightGrey</span>
            <span class="badge bg-darkCyan">darkCyan</span>
            <hr/>


            <h4><b>弹窗</b></h4>
            <br/>

            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
                Launch demo modal
            </button>


            <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title" id="myModalLabel">Modal title</h4>
                        </div>
                        <div class="modal-body">
                            ...
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                            <button type="button" class="btn btn-primary">Save changes</button>
                        </div>
                    </div>
                </div>
            </div>
            <h4><b>分页标签</b></h4>
            <br/>
            <ul class="pagination">
                <li class="disabled"><a href="#">&lt;&lt;</a></li>
                <li class="disabled"><a href="#">&lt;</a></li>
                <li class="active"><a href="?page=1&amp;name=&amp;communityId=&amp;sortType=&amp;&amp;status=">1</a>
                </li>
                <li><a href="?page=2&amp;name=&amp;communityId=&amp;sortType=&amp;&amp;status=">2</a></li>
                <li><a href="?page=3&amp;name=&amp;communityId=&amp;sortType=&amp;&amp;status=">3</a></li>
                <li><a href="?page=4&amp;name=&amp;communityId=&amp;sortType=&amp;&amp;status=">4</a></li>
                <li><a href="?page=5&amp;name=&amp;communityId=&amp;sortType=&amp;&amp;status=">5</a></li>
                <li><a href="?page=2&amp;name=&amp;communityId=&amp;sortType=&amp;&amp;status=">&gt;</a></li>
                <li><a href="?page=17&amp;name=&amp;communityId=&amp;sortType=&amp;&amp;status=">&gt;&gt;</a></li>
            </ul>
            <h4><b>容器和容器中的表单</b></h4>
            <br/>
            <h5> .box 的结构： </h5>
            <code>
                div.box>div.box-header+div.box-body+div.box-footer
            </code>
            <h5> from 的结构： </h5>
            <code>
                form.form-horizontal>div.form-group>label.col-md-2.control-label+div.col-md-6>input.form-control
            </code>
            <h5> 水平排列的input有两种方式实现：</h5>

            <p>1 . 使用 .input-row 以及宽度，如 .w55 </p>
            <code>
                form.form-horizontal>div.form-group>label.col-md-2.control-label+div.col-md-6>input.form-control
            </code>

            <p>2 . </p>
            <code>
                form.form-horizontal>div.form-group>(label.col-md-2.control-label+div.col-md-2>input.form-control)*2
            </code>

            <p>放在box-footer 中的button需要添加col-md-offset-2与上面的表单对齐</p>
            <code>
                div.box-footer>button.btn.btn-primary.col-md-2
            </code>
            <br/>
            <div class="box">
                <div class="box-header">
                    <h4 class="text-lightGrey">房屋信息</h4>
                    <button class="btn btn-primary btn-sm pull-right">编辑</button>
                </div>
                <div class="box-body">
                    <form action="" class="form-horizontal">
                        <div class="form-group">
                            <label for="community" class="col-md-2 control-label">小区</label>

                            <div class="col-md-3">
                                <input type="text" name="community" class="form-control" id="community"
                                       placeholder="小区">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="apartment" class="col-md-2 control-label">公寓</label>

                            <div class="col-md-3">
                                <input type="text" name="apartment" class="form-control" id="apartment"
                                       placeholder="公寓">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="address" class="col-md-2 control-label">地址</label>

                            <div class="col-md-3">
                                <input type="text" name="address" class="form-control" id="address" placeholder="地址">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="nub" class="col-md-2 control-label">房源编号</label>

                            <div class="col-md-3">
                                <input type="text" name="nub" class="form-control" id="nub" placeholder="房源编号">
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-md-2 control-label">户型</label>

                            <div class="col-md-8">
                                <input type="text" name="roomStyle" class="form-control input-row w55" id="roomStyle"
                                       placeholder="室">
                                <label for="roomStyle" class="control-label">室</label>
                                <input type="text" name="roomStyle" class="form-control input-row w55" id="roomStyle"
                                       placeholder="厅">
                                <label for="roomStyle" class="control-label">厅</label>
                                <input type="text" name="roomStyle" class="form-control input-row w55" id="roomStyle"
                                       placeholder="卫">
                                <label for="roomStyle" class="control-label">卫</label>
                                <input type="text" name="roomStyle" class="form-control input-row w55" id="roomStyle"
                                       placeholder="平方">
                                <label for="roomStyle" class="control-label">m <sup>2</sup></label>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-2 control-label">其他板块</label>

                            <div class="col-md-8">
                                <input type="checkbox" id="checkbox1" class="checkbox-inline"/>
                                <label for="checkbox1" class="control-label">添加拿房信息</label>
                                <input type="checkbox" id="checkbox2" class="checkbox-inline"/>
                                <label for="checkbox2" class="control-label">添加拿房信息</label>
                                <input type="checkbox" id="checkbox3" class="checkbox-inline"/>
                                <label for="checkbox3" class="control-label">添加拿房信息</label>
                                <input type="checkbox" id="checkbox4" class="checkbox-inline"/>
                                <label for="checkbox4" class="control-label">添加拿房信息</label>
                            </div>
                        </div>
                        <hr/>
                        <div class="form-group">
                            <label for="style" class="col-md-2 control-label">装修风格</label>

                            <div class="col-md-2">
                                <select name="style" id="style" class="form-control">
                                    <option value="碧野仙踪">碧野仙踪</option>
                                    <option value="2">2</option>
                                    <option value="3">3</option>
                                    <option value="4">4</option>
                                </select>
                            </div>
                            <label class="col-md-1 control-label">佣金</label>

                            <div class="col-md-2">
                                <div class="input-group">
                                    <span class="input-group-addon" id="basic-addon1">￥</span>
                                    <input type="text" name="roomStyle" class="form-control" placeholder="佣金">
                                </div>
                            </div>
                        </div>
                        <div class="box-footer">
                            <button class="btn btn-greyPurple col-md-offset-2">保存</button>
                            <button class="btn btn-primary col-md-offset-2">发布到外网</button>
                        </div>
                    </form>
                </div>
            </div>

            <div class="box">
                <div class="box-header">
                    <ul class="tag-group">
                        <li class="tag tag-default active" data-toggle="tab" data-target="#room1">room1</li>
                        <li class="tag tag-default" data-toggle="tab" data-target="#room2">room2</li>
                        <li class="tag tag-default" data-toggle="tab">room3</li>
                        <li class="tag tag-default" data-toggle="tab">room4</li>
                        <li class="tag tag-default" data-toggle="tab">room5</li>
                    </ul>
                </div>
                <div class="box-body tab-content">
                    <div class="form-horizontal tab-pane fade active in" id="room1">
                        <div class="form-group">
                            <label class="col-md-2 control-label">房间编号</label>

                            <div class="col-md-8">
                                <span>XIAOLUOQUZU106698888</span>
                                <span>(自动分配)</span>
                                <button class="btn btn-link btn-xs">修改</button>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-2 control-label">房客人数</label>

                            <div class="col-md-8">
                                <input type="radio" name="count" id="count1"/><label for="count1" class="control-label">1人</label>
                                <input type="radio" name="count" id="count2"/><label for="count2" class="control-label">2人</label>
                                <input type="radio" name="count" id="count3"/><label for="count3" class="control-label">3人</label>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-2 control-label">房间照片</label>

                            <div class="col-md-8">
                                <!--<img src="sass/img/img.png" alt="" class="img-thumbnail"/>-->
                            </div>
                        </div>
                    </div>

                    <div class="form-horizontal tab-pane fade" id="room2">
                        <div class="form-group">
                            <label class="col-md-2 control-label">代码格式</label>

                            <div class="col-md-8">
                                <code>ul.tag-group>li.tag.tag-default[data-toggle=tab][data-target=#room$]{room$}*4</code>

                                <p>记得要给默认的标签加上.active</p>
                                <code>div.tab-content>div.tab-pane.fade#room$*4</code>

                                <p>记得要给默认的标签页加上.active .in</p>

                            </div>
                        </div>
                    </div>
                </div>
                <div class="box-footer">
                    <button class="btn btn-greyPurple col-md-offset-2">修改</button>
                </div>
            </div>


            <hr/>
            <h4><b>面包屑和搜索框</b></h4>

            <div class="tools">
                <span>添加房源</span>
                <ol class="breadcrumb">
                    <li><a href="#">房源中心</a></li>
                    <li><a href="#">资产管理列表</a></li>
                    <li class="active">添加房源</li>
                </ol>
                <form class="form-inline  pull-right">
                    <div class="input-group">
                        <input type="text" name="keyword" value="" class="form-control input-sm pull-right"
                               style="width: 150px;" placeholder="关键字">

                        <div class="input-group-btn">
                            <button class="btn btn-sm btn-primary icon icon-search"></button>
                        </div>
                    </div>
                </form>
            </div>

            <form class="form-inline">
                <div class="input-group">
                    <input type="text" name="keyword" value="" class="form-control input-sm pull-right"
                           style="width: 150px;" placeholder="关键字">

                    <div class="input-group-btn">
                        <div class="btn-group icon" role="group">
                            <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"
                                    aria-haspopup="true" aria-expanded="false">
                                搜索
                                <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu">
                                <li><a href="#">搜索租客名</a></li>
                                <li><a href="#">搜索小区名</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </form>

            <div class="box p20">
                <form action="#" class="form-inline pull-right search-form">
                    <div class="input-group">
                        <input type="text" name="" value="" class="form-control input-sm pull-right" placeholder="关键字">

                        <div class="input-group-btn">
                            <button id="btn-search" class="btn btn-sm btn-primary icon icon-search"></button>
                        </div>
                    </div>
                    <button class="btn btn-primary pull-right" data-order="new"> + 新预约</button>
                </form>
            </div>

            <hr/>
            <h4><b>图片按钮</b></h4>

            <div class="box">
                <div class="box-body">
                    <a href="#" class="btn"><img src="img/iconfont-message.png" alt="查看消息"/></a>
                    <a href="#" class="btn"><img src="img/iconfont-calculate.png" alt="查看消息"/>
                        <span class="badge bg-pinkRed">5</span>
                    </a>
                    <code>
                        a.btn>img+span.badge.bg-pinkRed
                    </code>
                </div>
            </div>


            <hr/>
            <h4><b>弹出框</b></h4>
            <a class="btn btn-danger" href="#" id="pop_demo" data-id="data">鼠标经过弹出提示</a>

            <a class="btn btn-link" href="javascript:;" id="pop_demo1">鼠标点击弹出提示</a>
            <br/>
            <script type="text/html" id="popover-tpl">
                <span>{{id}} 需要引入 <code>tooltip.js</code></span>
            </script>
            <script>
                $('#pop_demo').popover({
                    animation: true,
                    trigger: 'hover',
                    html: true,
                    content: template('popover-tpl', {id: $('#pop_demo').data('id')}),
                    placement: 'top',
                });
                $('#pop_demo1').popover({
                    animation: true,
                    trigger: 'click',
                    html: true,
                    content: template('popover-tpl', {id: $('#pop_demo').data('id')}),
                    placement: 'right',
                });
            </script>

            <hr/>
            <h4><b>卡片</b></h4>

            <div class="card-box">
                <div class="card">
                    <div class="card-title">创世纪滨海花园1</div>
                    <div class="card-body">
                        <p>地铁线-地铁站</p>
                        <p>地址</p>
                        <p>地址</p>
                    </div>
                    <div class="card-footer"><a href="#" class="btn btn-sm btn-primary">编辑</a></div>
                </div>
                <div class="card">
                    <div class="card-title">创世纪滨海花园2</div>
                    <div class="card-body">
                        <p>地铁线-地铁站</p>
                        <p>地址</p>
                        <p>地址</p>
                    </div>
                    <div class="card-footer"><a href="#" class="btn btn-sm btn-primary">编辑</a></div>
                </div>
                <div class="card">
                    <div class="card-title">创世纪滨海花园3</div>
                    <div class="card-body">
                        <p>地铁线-地铁站</p>
                        <p>地址</p>
                        <p>地址</p>
                    </div>
                    <div class="card-footer"><a href="#" class="btn btn-sm btn-primary">编辑</a></div>
                </div>
                <div class="card">
                    <div class="card-title">创世纪滨海花园4</div>
                    <div class="card-body">
                        <p>地铁线-地铁站</p>
                        <p>地址</p>
                        <p>地址</p>
                    </div>
                    <div class="card-footer">
                        <a href="#" class="btn btn-sm btn-primary">编辑</a>
                        <a href="#" class="btn btn-sm btn-danger">删除</a>
                    </div>
                </div>
            </div>
            <hr/>
            <h4><b>卡片</b></h4>

            <div class="box filter" id="selecter">
                <ul class="select">
                    <li class="select-list">
                        <dl data-name="status">
                            <dt>状态：</dt>
                            <dd class="select-all selected"><a href="#">全部（N）</a></dd>
                            <dd><a href="#selecter" data-value="1" data-text="未接单">未接单（N）</a></dd>
                            <dd><a href="#selecter" data-value="2" data-text="未联系">未联系（N）</a></dd>
                            <dd><a href="#selecter" data-value="3" data-text="不看房">不看房（N）</a></dd>
                            <dd><a href="#selecter" data-value="4" data-text="看房中">看房中（N）</a></dd>
                            <dd><a href="#selecter" data-value="5" data-text="再看看">再看看（N）</a></dd>
                            <dd><a href="#selecter" data-value="6" data-text="已签约">已签约（N）</a></dd>
                            <dd><a href="#selecter" data-value="7" data-text="不签约">不签约（N）</a></dd>
                        </dl>
                    </li>
                    <li class="select-result">
                        <dl>
                            <dt>已选条件：</dt>
                            <dd class="selected" id="Filter_selected_metroStationCode">
                                <a href="#selecter" data-value="26" data-text="西乡">西乡</a>
                            </dd>
                        </dl>
                    </li>
                </ul>
            </div>
            <h4><b>表格</b></h4>

            <p>表格border <code>.table-wrapper</code>
                <br/>
                限制文本显示宽度 <code>.max</code> 可自定宽度覆盖，如 <code>.max{max-width:100px}</code>
            </p>

            <table class="table table-hover table-wrapper">
                <thead>
                <tr>
                    <th>编号</th>
                    <th>日期</th>
                    <th>预约方式</th>
                    <th>姓名</th>
                    <th>手机</th>
                    <th>预约房间</th>
                    <th>预约时间</th>
                    <th>跟进人</th>
                    <th>备注</th>
                    <th>状态</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>1</td>
                    <td>
                        08-20 15:07:22
                    </td>
                    <td>微信</td>
                    <td>zoe</td>
                    <td>13007198073</td>
                    <td>丽晶国际 丽晶国际 2栋1单元17A D房</td>
                    <td>
                        08-20 15:07:22
                    </td>
                    <td>zoe</td>
                    <td><span class="max">备注备注备注备注</span></td>
                    <td class="text-center">
                        <span class="badge badge-md bg-primary">未联系</span>
                    </td>
                    <td class="text-center">
                        <button class="btn btn-link" data-type="2" data-id="NP6SbqmwB2KW">详情</button>
                    </td>
                </tr><tr>
                    <td>1</td>
                    <td>
                        08-20 15:07:22
                    </td>
                    <td>微信</td>
                    <td>zoe</td>
                    <td>13007198073</td>
                    <td>丽晶国际 丽晶国际 2栋1单元17A D房</td>
                    <td>
                        08-20 15:07:22
                    </td>
                    <td>zoe</td>
                    <td>备注备注备注备注</td>
                    <td class="text-center">
                        <span class="badge badge-md bg-greyPurple">未联系</span>
                    </td>
                    <td class="text-center">
                        <button class="btn btn-link" data-type="2" data-id="NP6SbqmwB2KW">详情</button>
                    </td>
                </tr><tr>
                    <td>1</td>
                    <td>
                        08-20 15:07:22
                    </td>
                    <td>微信</td>
                    <td>zoe</td>
                    <td>13007198073</td>
                    <td>丽晶国际 丽晶国际 2栋1单元17A D房</td>
                    <td>
                        08-20 15:07:22
                    </td>
                    <td>zoe</td>
                    <td>备注备注备注备注</td>
                    <td class="text-center">
                        <span class="badge badge-md bg-lightGrey">未联系</span>
                    </td>
                    <td class="text-center">
                        <button class="btn btn-link" data-type="2" data-id="NP6SbqmwB2KW">详情</button>
                    </td>
                </tr><tr>
                    <td>1</td>
                    <td>
                        08-20 15:07:22
                    </td>
                    <td>微信</td>
                    <td>zoe</td>
                    <td>13007198073</td>
                    <td>丽晶国际 丽晶国际 2栋1单元17A D房</td>
                    <td>
                        08-20 15:07:22
                    </td>
                    <td>zoe</td>
                    <td>备注备注备注备注</td>
                    <td class="text-center">
                        <span class="badge badge-md bg-primary">未联系</span>
                    </td>
                    <td class="text-center">
                        <button class="btn btn-link" data-type="2" data-id="NP6SbqmwB2KW">详情</button>
                    </td>
                </tr>
                </tbody>
                </table>

            <hr/>
            <br/>

            <h4><b>在页面中提示</b></h4>
            <br/>
            <button class="btn btn-primary"
                    onclick="calloutMsg('calloutDemo',1,'在页面指定位置弹出信息，一段时间后消失，需要事先再页面中放置一个带有警告框样式的div')"
                    title="在页面指定位置弹出信息，一段时间后消失，需要事先再页面中放置一个带有警告框样式的div">calloutDemo
            </button>
            <button class="btn btn-primary" onclick="alertMsg('alertDemo',1,'在页面指定位置弹出信息，需要事先再页面中放置一个带有警告框样式的div')"
                    title="在页面指定位置弹出信息，需要事先再页面中放置一个带有警告框样式的div">alertDemo
            </button>
            <br/>

            <div id="alertDemo" class="alert  alert-dismissable" style="display: none;">
                <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                <h4><i class="icon fa fa-ban"></i>注意!</h4>

                <p>Danger alert preview. This alert is dismissable. A wonderful serenity has taken possession of my
                    entire soul, like these sweet mornings of spring which I enjoy with my whole heart.</p>
            </div>


            <div id="calloutDemo" class="callout callout-danger" style="display: none;">
                <h4>注意!</h4>

                <p>There is a problem that we need to fix. A wonderful serenity has taken possession of my entire soul,
                    like these sweet mornings of spring which I enjoy with my whole heart.</p>
            </div>


            <div id="test">

            </div>
            <br/>

            <h3><b>局部提示</b></h3>

            <p>按钮提示</p>
            <br/>
            <button class="btn btn-primary demo1">提交</button>
            <p>disabled--已提交</p>
            <hr/>
            <button class="btn btn-primary demo2">提交</button>
            <p>success--已提交--继续提交</p>
            <hr/>
            <button class="btn btn-primary demo5">提交</button>
            <p>danger--提交失败----再次提交</p>
            <hr/>
            <button class="btn btn-primary demo3">提交</button>
            <p>文字提示</p>
            <hr/>
            <button class="btn btn-primary demo4">提交</button>
            <p>气泡提示</p>
            <hr/>
            <br/>

            <p>表单文字提示</p>

            <form action="" class="form-horizontal">
                <div class="form-group">
                    <label for="testI" class="col-sm-2 control-label">日期</label>

                    <div class="col-sm-10">

                        <input type="text" id="testI" class="form-control" placeholder="请输入XXX"/>
                        <!--
                            表单文字提示
                        -->
                        <span class="badge-danger">!</span>&nbsp;
                        <span class="text-danger"><small>您填写的日期为合同开始日期</small></span>
                        <!--
                            end
                        -->
                    </div>
                </div>
            </form>
            <!--
                使用时可直接复制到页面
            -->
            <hr/>
            <br/>

            <p>纠结： 在弹窗内完成操作后，settimeout刷新页面还是关闭弹窗时刷新</p>

            <div id="tagDemo" class="tagBox" style="display: none;">
                <div class="tag"><em></em>

                    <div class="tag-content">请填写正确的数值</div>
                </div>
            </div>

            <script>
                function showTags(obj, index, content) {
                    var arr = ["tag-success", "tag-danger", "tag-info", "tag-warning"];
                    $("#tagDemo").clone().addClass(arr[index]).appendTo(obj).show("normal").one("click", function () {
                        $(this).hide("normal");
                    }).find(".tag-content").html(content);
                }
            </script>
            <!--
                end
            -->
            <script>
                $(document.body).on('click', 'button.demo1', function (e) {
                    var $target = $(e.target);
                    $target.removeClass("btn-primary").addClass("btn-default disabled").html("已提交");
                });
                $(document.body).on('click', 'button.demo2', function (e) {
                    var $target = $(e.target);
                    $target.removeClass("btn-primary").addClass("btn-success").html("提交成功");
                    setTimeout(function () {
                        $target.removeClass("btn-success").addClass("btn-primary").html("继续提交");
                    }, 500);
                });
                $(document.body).on('click', 'button.demo3', function (e) {
                    var $target = $(e.target);
                    $target.after("<span class='text-danger'>&nbsp;提交失败，请刷新重试</span>");
                });
                $(document.body).on('click', 'button.demo4', function (e) {
                    showTags(e.target, 1, '失败，请检查网络');
                });
                $(document.body).on('click', 'button.demo5', function (e) {
                    var $target = $(e.target);
                    $target.removeClass("btn-primary").addClass("btn-danger").html("提交失败");
                    setTimeout(function () {
                        $target.removeClass("btn-danger").addClass("btn-primary").html("再次提交");
                    }, 800);
                });
                //错误提示
                //在页面指定位置弹出信息，一段时间后消失，需要事先再页面中放置一个带有警告框样式的div
                function calloutMsg(id, index, content) {
                    id = "#" + id;
                    //index为样式索引
                    var arr = ["callout-success", "callout-danger", "callout-info", "callout-warning"];
                    //滚动屏幕到顶端
//                    $('body').animate({scrollTop: 0}, 500);
                    $(id + ">p").html(content);
                    $(id).addClass(arr[index]).show("normal");
                    setTimeout(function () {
                        $(id).removeClass(arr[index]).hide("normal");
                    }, 3000);
                }
                //在页面指定位置弹出信息，需要事先再页面中放置一个带有警告框样式的div
                function alertMsg(id, index, content) {
                    id = "#" + id;
                    //index为样式索引
                    var arr = ["alert-success", "alert-danger", "alert-info", "alert-warning"];
                    //滚动屏幕到顶端
//                    $('body').animate({scrollTop: 0}, 500);
                    $(id + ">p").html(content);
                    $(id).addClass(arr[index]).show("normal");
                }
            </script>


        </div>
    </div>
</div>

<div class="p20"></div>
</body>
</html>
